<div class="header flex ">
    <img src="assets/images/arrow-left-white.png" alt="" class="header_img">
    <div class="header_cut"></div>
    <div class="header_title">新建应用</div>
</div>
<div class="background flex flex_column flex_1">
    <!-- 基本信息 -->
    <div class="bg_white module_base">
        <div class="base_title">基本信息</div>
        <div class="base_body">
            <div class="base_left">
                <div class="base_left_top">
                    <div class="star">*</div>
                    <div class="base_left_title">应用名称</div>
                    <input nz-input [(ngModel)]="appName" placeholder="请输入应用名称" class="base_body_left_input">
                </div>
                <div class="base_left_bottom">
                    <div class="base_left_title">应用负责人</div>
                    <input nz-input [(ngModel)]="appName" placeholder="请输入应用负责人" class="base_body_left_input">
                </div>
            </div>
            <div class="base_right">
                <div class="base_right_title">
                    <div class="base_right_title_top">应用名称</div>
                    <div></div>
                </div>
                <div class="base_right_body">
                    <textarea nz-input [(ngModel)]="text" placeholder="请输入应用描述" class="base_body_right_textarea"></textarea>
                    <div class="textarea_count">0/1000</div>
                </div>
            </div>
        </div>

    </div>
    <!-- 工作流配置 -->
    <div class="bg_white module_workflow">
        <div class="workflow_title">工作流配置</div>
        <div class="workflow_body">
            <div class="workflow_body_top">
                <div class="workflow_top_left">
                    <div class="star">*</div>
                    <div class="workflow_top_left_title">所属行业</div>
                    <nz-select ngModel="lucy" class="workflow_body_select">
                        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
                        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                        <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
                    </nz-select>
                </div>
                <div class="workflow_top_right">
                    <div class="workflow_top_right_title">应用场景</div>
                    <nz-select ngModel="lucy" class="workflow_body_select" style="margin-left: 32px;">
                        <nz-option nzValue="jack" nzLabel="Jack"></nz-option>
                        <nz-option nzValue="lucy" nzLabel="Lucy"></nz-option>
                        <nz-option nzValue="disabled" nzLabel="Disabled" nzDisabled></nz-option>
                    </nz-select>
                </div>
            </div>
            <div class="workflow_body_bottom">
                <div class="workflow_bottom_title">
                    <div class="star">*</div>
                    <div class="base_left_title">选择工作流</div>
                </div>
                <div class="workflow_bottom_body">
                    <div class="workflow_bottom_modulelist">
                        <div class="workflow_bottom_module">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module_2nd">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module_2nd">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module_2nd">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>
                        <div class="workflow_bottom_module_2nd">
                            <img src="assets/images/virtualmachine.png" alt="" class="workflow_module_img">
                            <div class="module_title">智能分类工作流</div>
                            <div class="module_button_div">
                                <div class="module_button_1">华为</div>
                                <div class="module_button_2">通种分类</div>
                            </div>
                            <div class="module_data">提供通用文字识别、支持正反面啊伟大伟大哇大碗大碗大阿伟大碗大碗大碗大碗达瓦达瓦达瓦大屋顶大伟大大碗大碗大碗大碗大碗大碗大碗的碗大碗大碗大碗的
                            </div>
                        </div>

                    </div>
                </div>

            </div>

        </div>
        <!-- 下部分页模块 -->
        <div class="Pagination">
            <nz-select ngModel="1" class="p_select">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
            <nz-pagination [(nzPageIndex)]="current" [nzTotal]="80" [nzSize]="'small'" [nzPageSize]="8" [nzShowTotal]="totalTemplate"></nz-pagination>
            <ng-template #totalTemplate let-total>总条数：{{ total }}</ng-template>
        </div>

    </div>
    <!-- 资源配置 -->
    <div class="bg_white module_resourse">
        <div class="res_title">资源配置</div>
        <div class="res_notes">您选择的工作流将会用到如下资源用于训练及部署，您可以根据业务调整相应资源。</div>
        <div class="res_module">
            <div class="star">*</div>
            <div class="res_module_title">数据处理资源</div>
            <nz-select ngModel="1" class="res_select1">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
            <nz-select ngModel="1" class="res_select2">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
        </div>
        <div class="res_module">
            <div class="star">*</div>
            <div class="res_module_title">模型训练资源</div>
            <nz-select ngModel="1" class="res_select1">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
            <nz-select ngModel="1" class="res_select2">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
        </div>
        <div class="res_module">
            <div class="star">*</div>
            <div class="res_module_title">部署方式</div>
            <nz-select ngModel="1" class="res_select1">
                <nz-option nzValue="1" nzLabel="1"></nz-option>
                <nz-option nzValue="2" nzLabel="2"></nz-option>
                <nz-option nzValue="3" nzLabel="3" nzDisabled></nz-option>
            </nz-select>
        </div>
    </div>

</div>
<div class="bg_white module_choose">
    <div class="ok">确定</div>
    <div class="cancel">取消</div>
</div>